<template>
  <div>
    <div class="box">
      <el-col :span="15">
        <el-input
          type="text"
          placeholder="请输入员工工号作为检索关键字"
          v-model="keyword"
          maxlength="10"
          show-word-limit
        ></el-input>
      </el-col>
      <div>
        <el-button type="primary" @click="showaddWindow">添加考勤信息</el-button>
        <el-button type="primary" round @click="searchAttendence">查找</el-button>
      </div>
    </div>
    <el-table :data="tableData_Attendence" style="width: 100%">
      <el-table-column prop="workNumber" label="员工工号"></el-table-column>
      <el-table-column prop="name" label="员工姓名"></el-table-column>
      <el-table-column prop="age" label="员工年龄"></el-table-column>
      <el-table-column prop="stationName" label="职位"></el-table-column>
      <el-table-column prop="overTimeHours" label="加班时间/时"></el-table-column>

      <el-table-column prop="numberLateHours" label="迟到时间/时"></el-table-column>
      <el-table-column prop="absentTimes" label="旷工次数"></el-table-column>
      <el-table-column prop="offTimeHours" label="请假时间/时"></el-table-column>
    </el-table>
    <!--        添加考勤信息的弹窗-->
    <el-dialog title="编辑岗位" :visible.sync="addAttendanceDialogVisible" width="40%">
      <el-form label-width="120px" ref="add_form_ref" :model="edit_Attendance_form">
        <el-form-item label="员工工号">
          <el-col :span="20">
            <el-input v-model="edit_Attendance_form.workNumber"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="考勤类型">
          <el-form ref="add_form_ref" :model="edit_Attendance_form">
            <el-select v-model="edit_Attendance_form.matter" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form>
        </el-form-item>
        <el-form-item label="花费时间">
          <el-col :span="20">
            <el-input
              placeholder="请输入花费时间"
              v-model="edit_Attendance_form.occur_time"
              maxlength="5"
              show-word-limit
            ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAttendanceDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAttendenceInfo">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData_Attendence: [],
      keyword: "",
      addAttendanceDialogVisible: false,
      edit_Attendance_form: {
        workNumber: "",
        matter: "",
        occur_time: ""
      },
      options: [
        {
          value: "迟到"
        },
        {
          value: "加班"
        },
        {
          value: "请假"
        }
      ]
    };
  },
  methods: {
    //按检索工号渲染
    searchAttendence() {
      if (this.keyword.length !== 10) {
        this.$message.error("输入工号不满足10位");
        this.keyword = "";
      } else {
        let data = {
          token: this.$store.state.token,
          workNumber: this.keyword
        };
        this.$http.post("/getAttendanceInfo", data).then(res => {
          this.tableData_Attendence = res.data;
        });
      }
    },
    showaddWindow() {
      this.addAttendanceDialogVisible = true;
    },
    addAttendenceInfo() {
      let data = {
        token: this.$store.state.token,
        addAttendanceInfo: this.edit_Attendance_form
      };
      console.log(data)
      this.$http.post("/addAttendanceInfo", data).then(res => {
        console.log(res);
        if (res.data.result =="success") {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.addAttendanceDialogVisible = false;
          this.fetch();
        }else{
            this.$message({
            message: "添加失败",
            type: "error"
          });
        }
      });
    },
    //最开始渲染
    fetch() {
      let data = {
        token: this.$store.state.token,
        workNumber: null
      };
      this.$http.post("/getAttendanceInfo", data).then(res => {
        this.tableData_Attendence = res.data;
      });
    }
  },
  created() {
    this.fetch();
  }
};
</script>

<style scoped>
</style>
